<script setup>
import { ref, reactive, watch, getCurrentInstance,defineExpose } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
import { login, register, getBasisSetting, getUserInfo } from "../../http/api";
const baseUrl = ref(import.meta.env.VITE_APP_BASE_URL);
const { proxy } = getCurrentInstance();

const { $t } = proxy;
let numberExchange = ref(proxy.$numberExchange);
//引入全局注册的proxy
const router = useRouter();
const emit = defineEmits([
  "emitMenutabIndex",
  "changePage",
  "loginEmit",
  "logoutEmit",
  "changeIsDarkEmit",
]);
const props = defineProps({
  userInfo: {
    type: Object,
    default: undefined,
  },
  isDark: {
    type: Boolean,
    default: true,
  },
  menuTabWordIndex: Number,
});
locale.value = localStorage.getItem("lang") || "zhCN";
// 账号密码输入框值
let account = ref("");
let pwd = ref("");

let checkeRemerber = ref(true);
// 保存cookie
const setCookie = (cName, value, expiredays) => {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie =
    cName +
    "=" +
    decodeURIComponent(value) +
    (expiredays == null ? "" : ";expires=" + exdate.toGMTString());
};
// 获取cookie
const getCookie = (key) => {
  if (document.cookie.length > 0) {
    var start = document.cookie.indexOf(key + "=");
    if (start !== -1) {
      start = start + key.length + 1;
      var end = document.cookie.indexOf(";", start);
      if (end === -1) end = document.cookie.length;
      return unescape(document.cookie.substring(start, end));
    }
  }
  return "";
};

// 记住密码设置邮箱密码
const setAcPwd = () => {
  // 在页面加载时从cookie获取登录信息
  const username = getCookie("username");
  const password = getCookie("Password");
  console.log(username, password, "checkeRemerber.value");

  // 如果存在赋值给表单，并且将记住密码勾选
  if (username) {
    account.value = username;
    pwd.value = password;
    checkeRemerber.value = true;
  }
};
const setUserInfo = () => {
  if (checkeRemerber.value) {
    setCookie("username", account.value);
    setCookie("Password", pwd.value);
    setCookie("remember", checkeRemerber.value);
  } else {
    setCookie("username", "");
    setCookie("Password", "");
  }
};

let maskShow2 = ref(false); //登录弹窗是否显示

watch(maskShow2, (newValue, oldValue) => {
  console.log("watch 已触发", newValue);
  if (newValue) {
    setAcPwd();
  }
});
// 获取用户信息接口(用来检测token是否失效)
// const getUserInfoFn = (pathName, pageIndex) => {
//   getUserInfo()
//     .then(() => {
      
//     })
//     .catch((err) => {
//       if (
//         pathName === "personCenter" &&
//         err.response.data.message === "Token失效，请重新登录!"
//       ) {
//         // ElMessage.warning(err.response.data.message);
//       } else {
//         if (
//           router.currentRoute.value.path === "/gac/personCenter" &&
//           pathName === "personCenter"
//         ) {
//           emit("changePage", pageIndex);
//           return;
//         }
//         router.push({ name: pathName, query: { pageIndex: pageIndex } });
//       }
//     });
// };
// 跳转页面方法
const toPage = async (pathName, index, pageIndex) => {
  if (index) {
    // menuTabWordIndex.value = index
    emit("emitMenutabIndex", index);
  }
  if (pathName === "personCenter" && !props.userInfo) {
    return ElMessage.warning(`${$t("msg.message.PleaseLog")}！`);
  }
  if (
    router.currentRoute.value.path === "/gac/personCenter" &&
    pathName === "personCenter"
  ) {
    console.log(router.currentRoute.value.path, "path打印-----111");
    emit("changePage", pageIndex);
    return;
  }
  router.push({ name: pathName, query: { pageIndex: pageIndex } });
  // getUserInfoFn(pathName, pageIndex);
  // return
  // console.log(pathName, index, pageIndex, 'pathName, index,pageIndex')
};
// 扭蛋金币数组
let eggMoneyCountList = reactive([
  { count: 1, id: "1" },
  { count: 10, id: "2" },
  { count: 50, id: "3" },
  { count: 500, id: "4" },
  { count: 1000, id: "5" },
]);
// 当前扭蛋金币数组下标
let countIndex = ref(0);
// 金币自定义数量输入框值
let input2 = ref("");
//礼品卡金币数组
let prisentMoneyCountList = reactive([
  { count: 1, id: "1" },
  { count: 15, id: "2" },
  { count: 150, id: "3" },
  { count: 500, id: "4" },
  { count: 1000, id: "5" },
]);
// 弹窗各个节点是否显示的对象
let showObj = reactive({
  show1: true,
  show2: false,
  show3: false,
  show4: false,
});
// 充值弹窗里点击各个节点的事件
const changeShowClick = (num) => {
  for (let key in showObj) {
    console.log("key", key);
    console.log("value", showObj[key]);
    if (`show${num}` === key) {
      showObj[key] = true;
    } else {
      showObj[key] = false;
    }
  }
};
// 加密货币头部tab数组
let moneyCountList = reactive([{}, {}]);

// 账号输入框是否高亮
let acinputIsActive = ref(true);
// 密码输入框是否高亮
let pwdinputIsActive = ref(false);

// 头部菜单左侧选项数组
let menuTabWordList = reactive([
  { name: "home", path: "home" },
  { name: "prizeList", path: "prize" },
  { name: "earn", path: "earn" },
  { name: "Playerreviews", path: "review" },
]);

// let menuTabWordIndex = ref(0)
let token = ref("");
setTimeout(() => {
  if (localStorage.getItem("token")) {
    token.value = localStorage.getItem("token");
  }
},300)


// 登录
const loginFunc = async () => {
  const userInfo = props.userInfo;
  console.log(userInfo, "头部子组件");
  if (userInfo) return;
  if (account.value === "" || pwd.value === "") {
    return ElMessage.warning(`${$t("msg.message.EmailAndPassword")}！`);
  }
  const res = await login({ email: account.value, password: pwd.value });
  console.log(res, "ressss");
  if (res.success) {
    ElMessage({
      message: `${$t("msg.message.LoginSuccessful")}！`,
      type: "success",
    });
    // userInfo =
    localStorage.setItem("isShowTokenLoseTips", '');
    emit("loginEmit", res.result.userInfo);
    token.value = res.result.token;
    localStorage.setItem("token", res.result.token);
    localStorage.setItem("userInfo", JSON.stringify(res.result.userInfo));
    setUserInfo();
  } else {
    ElMessage.error(res.message);
  }

  maskShow2.value = false;
};
let maskShow3 = ref(false);
let regObj = reactive({
  data: {
    email: "",
    username: "",
    pwd: "",
    pwd2: "",
    shareCode: "",
  },
});
// 注册
const registerFunc = async () => {
  let flag = false;

  if (
    regObj.data.email === "" ||
    regObj.data.username === "" ||
    regObj.data.pwd === "" ||
    regObj.data.pwd2 === ""
  ) {
    flag = true;
  }

  let reg =
    /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
  if (!reg.test(regObj.data.email)) {
    return ElMessage.warning(`${$t("msg.message.EmailFormatError")}！`);
  }
  if (flag) return ElMessage.warning(`${$t("msg.message.TheFormCannot")}！`);

  if (regObj.data.pwd !== regObj.data.pwd2) {
    return ElMessage.warning(`${$t("msg.message.mustBeConsistent")}！`);
  }

  const res = await register({
    realName: regObj.data.username,
    password: regObj.data.pwd,
    email: regObj.data.email,
  });
  console.log(res, "res注册是否结果");
  if (res.success) {
    ElMessage.success(`${$t("msg.message.registeredSuccess")}！`);
  } else {
    ElMessage.error(res.message);
  }
  regObj.data = {};
  maskShow2.value = true;
  maskShow3.value = false;
};
const loginShow = () => {
  const userInfo = props.userInfo;
  console.log(userInfo, "头部子组件222");
  if (userInfo) return;
  maskShow2.value = true;
};
defineExpose({
  loginShow
})
const regShow = () => {
  maskShow3.value = true;
};
// 退出登录
const logOut = () => {
  localStorage.removeItem("token");
  localStorage.removeItem("userInfo");
  // 设置不提示token失效的缓存
  localStorage.setItem("isShowTokenLoseTips", true);
  token.value = "";
  account.value = "";
  pwd.value = "";
  emit("logoutEmit");
  toPage("home");
};
// 切换模式主题
const changeIsDark = () => {
  let IsDark = !props.isDark;
  localStorage.setItem("isDark", IsDark);
  emit("changeIsDarkEmit", IsDark);
};
let logoUrl = ref("");
// 获取基础公共配置
const getBasisSettingFn = async () => {
  let res = await getBasisSetting();
  if (res.success) {
    logoUrl.value =
      baseUrl.value + "/sys/common/static/" + res.result.webLogoUrl;
  }
  console.log(logoUrl.value, "logoUrl");
};
getBasisSettingFn();
// 中英文切换
const changeLang = (mode) => {
  if (mode === "ch") {
    locale.value = "zhCN";
  } else {
    locale.value = "en";
  }
  localStorage.setItem("lang", locale.value);
};
</script>

<template>
  <div class="homeHead" :style="{ background: 'rgba( 0, 0, 0)' }">
    <div class="homeHeads">
      <div class="homeHeadL">
        <div class="logoBox" v-if="logoUrl">
          <img :src="logoUrl" alt="" />
        </div>
        <div class="homeHeadList">
          <div
            :class="
              menuTabWordIndex === index ? 'homeHeadLItemActive' : 'homeHeadLItem'
            "
            v-for="(item, index) in menuTabWordList"
            :key="index"
            @click="toPage(item.path, index)"
          >
            {{ $t(`msg.message.${item.name}`) }}
          </div>
        </div>
       
      </div>
      <div class="homeHeadR">
        <div
          class="homeHeadRitem homeRitem"
          v-if="token"
          @click="toPage('personCenter', '', '7')"
        >
          <img
            src="../../assets/img/header/money.png"
            alt=""
            class="homeRitemImg img2 marright6"
          />
          <div>{{ numberExchange(props?.userInfo?.balance) }}</div>
          <img
            src="../../assets/img/header/Vector.png"
            class="homeRitemImg addPriceImg"
            alt=""
          />
        </div>
        <div class="homeHeadRitemImgBox">
          <div class="homeHeadRitem padright9" v-if="token">V1</div>
          <div class="homeHeadRitem" v-if="!token"  style="width: 60px;" @click="regShow">
            {{ $t("msg.message.register") }}
          </div>
          <div v-if="token" style="display: flex; align-items: center">
            <el-dropdown>
              <div class="homeHeadRitemD">
                <div class="homeHeadRitem padright9" @click="loginShow">
                  {{ props?.userInfo?.username }}
                </div>
                <!-- <img src="../../assets/img/header/right.png" alt=""> -->
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    @click.stop="toPage('personCenter', '', '1')"
                  >
                    {{ $t("msg.message.PersonalCenter") }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    @click.stop="toPage('personCenter', '', '6')"
                  >
                    {{ $t("msg.message.reward") }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    @click.stop="toPage('personCenter', '', '4')"
                  >
                    {{ $t("msg.message.PurchasedTwistedEgg") }}
                  </el-dropdown-item>
                  <el-dropdown-item @click.stop="toPage('earn', '')">
                    {{ $t("msg.message.PromotionCode") }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    @click.stop="toPage('personCenter', '', '7')"
                  >
                    {{ $t("msg.message.Recharge") }}
                  </el-dropdown-item>
                  <el-dropdown-item @click.stop="logOut">
                    {{ $t("msg.message.Logout") }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="homeHeadRitem" style="width: 48px;" v-else @click="loginShow">
            {{ $t("msg.message.login") }}
          </div>
        </div>
        <div class="homeHeadRitem homeRitem">
          <el-dropdown>
            <div class="homeHeadRitemD">
              <div>{{ locale === "zhCN" ? "CN" : "EN" }}</div>
              <img
                src="../../assets/img/header/down.png"
                class="homeRitemImg w13"
                alt=""
              />
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click.stop="changeLang('ch')">
                  中文
                </el-dropdown-item>
                <el-dropdown-item @click.stop="changeLang('en')">
                  English
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div
          class="homeHeadRitem homeRitem"
          style="position: relative"
          v-show="isDark"
          @click="changeIsDark"
        >
          <div class="rijian">{{ $t("msg.message.DayMode") }}</div>
          <img
            src="../../assets/img/header/light.png"
            :class="
              locale === 'zhCN'
                ? 'homeRitemImg rijian2'
                : 'homeRitemImg rijian3'
            "
            alt=""
          />
        </div>
        <div
          class="homeHeadRitem homeRitem"
          style="position: relative"
          v-show="!isDark"
          @click="changeIsDark"
        >
          <img
            src="../../assets/img/header/dark.png"
            :class="
              locale === 'zhCN'
                ? 'homeRitemImg rijian2'
                : 'homeRitemImg rijian3'
            "
            alt=""
          />
          <div class="night">{{ $t("msg.message.NightMode") }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 登录弹窗 -->
  <div class="mask" style="z-index: 200" v-show="maskShow2">
    <div class="dialog">
      <div class="RechargeDialog border1" style="background: #0f0f0f">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: relative;
          "
        >
          <div class="RechargeWord">{{ $t("msg.message.login") }}</div>

          <img
            src="../../assets/img/policy/close.png"
            class="deleteImg"
            @click="maskShow2 = false"
            alt=""
          />
        </div>

        <div class="sureBtnBox padtop10">
          <el-button color="#FA584A" class="sureBtn">{{
            $t("msg.message.logFromGoole")
          }}</el-button>
        </div>
        <div class="other">
          <div class="line"></div>
          <div class="otherText">{{ $t("msg.message.perhaps") }}</div>
          <div class="line"></div>
        </div>
        <div
          :class="
            acinputIsActive
              ? 'countInput pwdInputActive'
              : 'countInput pwdInput'
          "
          @click="(acinputIsActive = true), (pwdinputIsActive = false)"
        >
          <el-input v-model="account" :placeholder="$t('msg.message.email')" />
        </div>
        <div
          :class="
            pwdinputIsActive
              ? 'countInput pwdInputActive'
              : 'countInput pwdInput'
          "
          @click="(acinputIsActive = false), (pwdinputIsActive = true)"
        >
          <el-input
            v-model="pwd"
            type="password"
            :placeholder="$t('msg.message.password')"
          />
        </div>
        <div class="chengnianBox">
          <el-checkbox
            v-model="checkeRemerber"
            :label="$t('msg.message.Rememberme')"
            size="large"
          />
        </div>
        <div class="sureBtnBox padtop10">
          <el-button color="#5BCE3A" class="sureBtn" @click="loginFunc">{{
            $t("msg.message.confirm")
          }}</el-button>
        </div>
        <div style="display: flex; justify-content: space-between">
          <div class="noAccount">
            <div>{{ $t("msg.message.Noaccountyet") }}？</div>
            <div
              style="cursor: pointer"
              @click="(maskShow3 = true), (maskShow2 = false)"
            >
              {{ $t("msg.message.register") }}
            </div>
          </div>
          <div class="noAccount">
            <div style="cursor: pointer">{{ $t("msg.message.forgotPwd") }}</div>
            <!-- <div style="cursor: pointer;" @click="maskShow3 = true, maskShow2 = false">注册</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 注册弹窗 -->
  <div class="mask" style="z-index: 200" v-show="maskShow3">
    <div class="dialog">
      <div class="RechargeDialog h430">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: relative;
          "
        >
          <div class="RechargeWord">{{ $t("msg.message.register") }}</div>

          <img
            src="../../assets/img/policy/close.png"
            class="deleteImg"
            @click="maskShow3 = false"
            alt=""
          />
        </div>

        <div class="countInput pwdInput">
          <el-input
            v-model="regObj.data.email"
            :placeholder="$t('msg.message.email')"
          />
        </div>
        <div class="countInput pwdInput">
          <el-input
            v-model="regObj.data.username"
            :placeholder="$t('msg.message.userName')"
          />
        </div>
        <div class="countInput pwdInput">
          <el-input
            type="password"
            v-model="regObj.data.pwd"
            :placeholder="$t('msg.message.password')"
          />
        </div>
        <div class="countInput pwdInput">
          <el-input
            type="password"
            v-model="regObj.data.pwd2"
            :placeholder="$t('msg.message.passwordagain')"
          />
        </div>
        <div class="countInput pwdInput">
          <el-input
            v-model="regObj.data.shareCode"
            :placeholder="$t('msg.message.invitationcode')"
          />
        </div>
        <div class="sureBtnBox padtop10">
          <el-button color="#5BCE3A" class="sureBtn" @click="registerFunc">{{
            $t("msg.message.confirm")
          }}</el-button>
        </div>
        <div class="noAccount">
          <div>{{ $t("msg.message.ExistingAccount") }}？</div>
          <div
            style="cursor: pointer"
            @click="(maskShow3 = false), (maskShow2 = true)"
          >
            {{ $t("msg.message.login") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.border1 {
  border: 1px solid #fff;
}
.padtop10 {
  padding-top: 10px;
}

.rijian {
  /* padding-right: 25px; */
  color: #212121 !important;
  font-size: 12px !important;
  position: absolute !important;
  left: 15px !important;
  width: 39%;
  text-align: center;
}

.rijian2 {
  width: 102px !important;
  height: 42px !important;
}
.rijian3 {
  width: 102px !important;
  height: 42px !important;
  left: 18px !important;
}
.night {
  font-size: 12px !important;
  position: absolute !important;
  right: 29px !important;
  color: #fff !important;
  width: 39%;
  text-align: center;
}

.addPriceImg {
  width: 14px !important;
  height: 12px !important;
}

.homeBody {
  overflow-x: hidden;
  /* min-width: 100%; */
  /* height: 100vh; */
  padding-bottom: 50px;
  overflow-y: auto;
  background-color: #0f123f;
  max-width: 2560px;
  margin: 0 auto;
  /* padding-top: 108px; */
}
.padright9 {
  padding-right: 9px;
}
.marright6 {
  margin-right: 6px;
}

.homeHead {
  /* background: rgba(0, 0, 0, .6); */
   position: fixed;
    z-index: 11;
    top: 0;
    max-width: 2560px;
    margin: 0 auto;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    min-width: 1200px;
}

.homeHeadL {
  display: flex;
  align-items: center;
}

.homeHeadR {
  display: flex;
  font-size: 18px;
}

.homeRitem {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.homeRitemImg {
  margin-left: 6px;
  width: 24px;
  height: 24px;
}

.img2 {
  width: 28px !important;
  height: 28px !important;
}

/* 充值弹窗遮罩层 */
.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.dialog {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 50%;
  height: 680px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.RechargeWord {
  font-size: 23px;
  text-align: center;
  padding-bottom: 23px;
}

.RechargeDialog {
  background: #0f0f0f;
  /* color: #fff; */
  width: 80%;
  height: 500px;
  border-radius: 10px;
  /* overflow-y: auto; */
  padding: 24px;
}

.RechargeDialogMain {
  border: 2px solid #f6ae41;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 14px;
}

.RechargeDialogMain2 {
  border: 2px solid #fff;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 14px;
  cursor: pointer;
}

.RechargeDialogTitle {
  font-size: 20px;
}

.RechargeDialogTitleRBig {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.RechargeDialogTitleR {
  display: flex;
}

.RechargeDialogTitleR div {
  width: 42px;
  height: 26px;
  background: #fff;
  border-radius: 2px;
  margin-right: 6px;
}

.RechargeMoneyCount {
}

.RechargeMoneyCountWord {
  color: #d0d2f0;
  font-size: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: left;
}

.RechargeMoneyCountItem {
  display: flex;
}

.RechargeMoneyCountImg {
  display: flex;
  align-items: center;
  width: 18%;
  height: 54px;
  background: #ffffff45;
  border-radius: 2px;
  justify-content: center;
  margin-right: 20px;
  margin-bottom: 14px;
  cursor: pointer;
}

.RechargeMoneyCountImg img {
  width: 18px;
}

.RechargeMoneyCountImg div {
  font-size: 24px;
  padding-left: 10px;
}

.RechargeMoneyCountImgActive {
  display: flex;
  align-items: center;
  width: 18%;
  height: 54px;
  /* background: #ffffff45; */
  border: 1px solid #fff;
  border-radius: 2px;
  justify-content: center;
  margin-right: 20px;
  margin-bottom: 14px;
  cursor: pointer;
}

.RechargeMoneyCountImgActive img {
  width: 18px;
}

.RechargeMoneyCountImgActive div {
  font-size: 24px;
  padding-left: 10px;
}

.deleteImg {
  width: 24px;
  height: 24px;
  cursor: pointer;
  position: absolute;
  right: 4px;
  top: 0px;
}

.sureBtn {
  color: #fff;
  width: 100%;
  height: 48px;
  font-size: 20px;
}

.countInput {
  display: flex;
  align-items: center;
  background: #ffffff45;
  padding: 5px;
  border-radius: 2px;
}

.countInput img {
  width: 18px;
  margin: 0 30px;
}

.countInput >>> .el-input__wrapper {
  background: transparent !important;
  /* border: 1px solid #ffffff45; */
  box-shadow: unset !important;
  /* color: #fff !important; */
  /* border-radius: 3px; */
}

:deep(.el-input__inner::placeholder) {
  color: #fff;
}

.countInput >>> .el-input__inner {
  color: #fff;
}

.sureBtnBox {
  display: flex;
  padding-top: 20px;
}

.chengnianBox {
  display: flex;
}

.chengnianBox >>> .el-checkbox {
  color: #fff !important;
}

.other {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}
.h430 {
  background: #0f0f0f;
  height: 430px;
  border: 1px solid #fff;
}
.line {
  width: 46%;
  height: 1px;
  background: #fff;
}

.otherText {
  font-size: 16px;
}

.prisentBox {
}

.tipsWordBox {
}

.tipsWord {
  text-align: left;
  font-size: 14px;
}

/* 加密货币 */
.titleBtc {
  font-size: 14px;
  text-align: left;
  padding-bottom: 10px;
}

.btcCodeBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btcCode {
  font-size: 18px;
  color: #d0d2f0;
  border: 1px solid;
  border-radius: 2px;
  padding: 13px 0;
  width: 92%;
}

.btcCopy {
  background: #ffffff45;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  cursor: pointer;
}

.btcCopy img {
  width: 24px;
}
.w13 {
  width: 12.73px;
  height: 7.78px;
}
.erweiCodeBox {
  height: 201px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 14px;
}

.eerweiCodeImg {
  background: #fff;
  border-radius: 10px;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eerweiCodeImg img {
  width: 79%;
}

.codeText {
  width: 24%;
  font-size: 14px;
  color: #d0d2f0;
  padding-top: 10px;
}

.codeTips {
  text-align: left;
}

.codeTips div {
  font-size: 14px;
}

.codeInputBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
}

.codeInputItem {
  display: flex;
  width: 47%;
  align-items: center;
}

.codeInputItemImg {
  display: flex;
  align-items: center;
  background: #ffffff45;
  padding: 8px 16px;
  border-radius: 2px;
}

.codeInputItemImg img {
  width: 18px;
}

.codeInput {
  width: 90%;
  display: flex;
}

.syscDengyu {
  width: 13px;
}

.codeInput >>> .el-input__wrapper {
  background: transparent !important;
}

.codeInput >>> .el-input {
  width: 100%;
}

.codeInput >>> .el-input__inner {
  color: #fff;
}

/* 登录弹窗 */
.pwdInput {
  background: transparent;
  border: 2px solid #282d7a;
  margin-bottom: 10px;
}

.pwdInputActive {
  background: transparent;
  border: 2px solid rgb(246, 174, 65);
  margin-bottom: 10px;
}

.noAccount {
  display: flex;
  align-items: center;
  text-align: left;
  color: #d0d2f0;
  font-size: 18px;
  padding-top: 10px;
}

.homeHeadRitemImgBox {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  padding-right: 22px;
}

.homeHeadRitemImgBox img {
  width: 17px;
}

.homeHeadRitemD {
  font-size: 18px;
  color: #fff;
  display: flex;
  align-items: center;
  padding-bottom: 0;
}

.logoBox {
    width: 144px;
    height: 52px;
    text-align: center;
    line-height: 52px;
    /* background-color: #2EDA9E; */
    margin-right: 36px;
  }
  .logoBox img {
    height: 100%;
  }
  .homeHeads {
    display: flex;
    color: #fff;
    justify-content: space-between;
    font-size: 24px;
    margin: 0 180px;
    /* padding: 20px 0; */
    /* padding-bottom: 0; */
    align-items: center;
    width: 100%;
  }
  .homeHeadLItem {
    cursor: pointer;
    font-size: 18px;
    /* padding: 18px 28px; */

    width: 96px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    /* width: 20%; */
    margin-right: 36px;
  }
  .homeHeadLItemActive {
    cursor: pointer;
    font-size: 20px;
    width: 96px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    /* width: 20%; */
    margin-right: 36px;
    color: #2eda9e;
    background: #333333;
  }
  .homeHeadRitem {
    padding: 30px 20px 30px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
.homeHeadList{
    display: flex;
    /* flex-wrap: wrap; */
}
@media screen and (min-width:2561px) {

.homeHead {
 left: unset;
}

}
@media screen and (max-width:1600px) {

.homeHeads {
 width: 1600px;
 margin: 0 20px;
}

}
/*屏幕宽度小于1500px,改变布局和样式*/
@media screen and (max-width:1500px) {

.homeHeadR {
  width: 100%;
  justify-content: flex-end;
}
.logoBox {
 margin-right: 0;
}
.homeHeadLItemActive{
  margin-right: 10px;
  font-size: 16px;
  height: 50px;
  line-height: 50px;
}
.homeHeadLItem{
  margin-right: 10px;
  font-size: 16px;
  height: 50px;
  line-height: 50px;
}
.homeHeadRitem{
    padding: 20px 20px 20px 0;
    font-size: 16px !important;
}
}
</style>
